<template>
  <view class="index-container"> <!-- 替换为标准view标签 -->
    <!-- 侧边栏 -->
    <view class="sidebar" :class="{ 'sidebar-active': sidebarOpen }">
      <view class="sidebar-header">
        <view class="avatar">
          <image src="/static/logo.png" mode="aspectFill" /> 
        </view>
        <view class="user-info">
          <h3 class="username">{{ username }}</h3>
          <p class="user-role">系统管理员</p>
        </view>
      </view>
      <view class="sidebar-content">
        <ul class="menu-list">
          <li class="menu-item" @click="handleMenuItemClick('profile')">
            <view class="menu-icon">👤</view>
            <span>更改名称</span>
          </li>
          <li class="menu-item" @click="handleMenuItemClick('password')">
            <view class="menu-icon">🔒</view>
            <span>更改密码</span>
          </li>
          <li class="menu-item" @click="handleMenuItemClick('logout')">
            <view class="menu-icon">🚪</view>
            <span>退出登录</span>
          </li>
        </ul>
      </view>
      <view class="sidebar-footer">
        <p>版本 v1.0.0</p>
      </view>
    </view>
    
    <!-- 遮罩层 -->
    <view class="overlay" :class="{ 'overlay-active': sidebarOpen }" @click="toggleSidebar"></view>

    <!-- 头部标题 -->
    <view class="header">
      <view class="header-content">
        <view class="menu-toggle" @click="toggleSidebar">
          <view class="menu-icon">☰</view>
        </view>
        <h1 class="header-title">温室卷帘门控制系统</h1>
        <image src="/static/logo.png" class="header-logo" /> 
      </view>
    </view>

    <!-- 中间内容区域 -->
    <view class="grid-container">
      <template v-if="currentPage === 'index'">
        <!-- 天气卡片网格 - 固定为2x2田字格布局 -->
        <view class="weather-grid">
          <!-- 温度卡片 -->
          <view class="grid-card" @click="handleCardClick(1)" :class="{ 'alert-triggered': isTemperatureAlert }">
            <view class="card-icon">🌡️</view>
            <h3 class="card-title">温度</h3>
            <p class="card-desc">
              {{ weatherData.temperature ? `实时温度：${weatherData.temperature}℃` : '获取中...' }}
            </p>
            <template v-if="isTemperatureAlert">
              <view class="alert-badge">超过阈值</view>
            </template>
          </view>

          <!-- 天气卡片 -->
          <view class="grid-card" @click="handleCardClick(2)">
            <view class="card-icon">{{ getWeatherIcon(weatherData.weather1) }}</view>
            <h3 class="card-title">天气</h3>
            <p class="card-desc">
              {{ weatherData.weather1 || '获取中...' }}
            </p>
          </view>

          <!-- 湿度卡片 -->
          <view class="grid-card" @click="handleCardClick(3)" :class="{ 'alert-triggered': isHumidityAlert }">
            <view class="card-icon">💧</view>
            <h3 class="card-title">湿度</h3>
            <p class="card-desc">
              {{ weatherData.humidity ? `空气湿度：${weatherData.humidity}%` : '获取中...' }}
            </p>
            <template v-if="isHumidityAlert">
              <view class="alert-badge">超过阈值</view>
            </template>
          </view>

          <!-- 气压卡片 -->
          <view class="grid-card" @click="handleCardClick(4)">
            <view class="card-icon">📊</view>
            <h3 class="card-title">气压</h3>
            <p class="card-desc">
              {{ weatherData.pressure ? `气压：${weatherData.pressure} hPa` : '获取中...' }}
            </p>
          </view>
        </view>
        <view class="footer-note">
          <p>
            本数据来自于 
            <a href="https://weather.cma.cn/" target="_blank" class="cma-link">
              中国气象局
            </a>
          </p>
        </view>
      </template>
      <template v-if="currentPage === 'index001'">
        <!-- 参数设置 中部内容 -->
        <view class="content-area centered-content">
          <view class="threshold-box centered-card">
            <h2 class="threshold-title">参数阈值设置</h2>
            <view class="status-item">
              <span class="item-label">温度阈值：</span>
              <view class="value-controls">
                <button class="control-btn" @click="decreaseTempThreshold"><span>-</span></button>
                <span class="item-value">{{ tempThreshold }}℃</span>
                <button class="control-btn" @click="increaseTempThreshold"><span>+</span></button>
              </view>
            </view>
            <view class="status-item">
              <span class="item-label">湿度阈值：</span>
              <view class="value-controls">
                <button class="control-btn" @click="decreaseHumidityThreshold"><span>-</span></button>
                <span class="item-value">{{ humidityThreshold }}%</span>
                <button class="control-btn" @click="increaseHumidityThreshold"><span>+</span></button>
              </view>
            </view>
            <p class="threshold-note">注：阈值范围为 0 - 100</p>
          </view>
        </view>
      </template>
      <template v-if="currentPage === 'index002'">
        <!-- 历史记录 中部内容 -->
        <view class="content-area centered-content">
          <view class="placeholder-text centered-card">
            <p>欢迎使用温室卷帘门控制系统</p>
            <p>暂无历史记录</p>
          </view>
        </view>
      </template>
      <template v-if="currentPage === 'index003'">
        <!-- 警报控制 中部内容 -->
        <view class="content-area centered-content">
          <view class="status-card centered-card">
            <h2 class="card-title">警报状态</h2>
            <view class="status-group">
              <view class="status-item">
                <span class="item-label">蜂鸣器警报：</span>
                <button class="item-value status-btn" :class="{ 'alert-active': buzzerAlert }" @click="toggleBuzzerAlert">
                  {{ buzzerAlert ? '开启' : '关闭' }}
                </button>
              </view>
              <view class="status-item">
                <span class="item-label">LED 灯警报：</span>
                <button class="item-value status-btn" :class="{ 'alert-active': ledAlert }" @click="toggleLedAlert">
                  {{ ledAlert ? '闪烁' : '关闭' }}
                </button>
              </view>
              <!-- <view class="status-item">
                <span class="item-label">警报持续时间：</span>
                <view class="duration-container">
                  <input type="number" class="duration-input" v-model="alarmDuration" placeholder="分钟">
                  <span class="unit">分钟</span>
                </view>
              </view> -->
              <view class="status-item">
                <span class="item-label">卷帘门状态：</span>
                <button class="item-value status-btn" :class="{ 
                  'door-open': doorStatus === 'open', 
                  'door-closed': doorStatus === 'closed',
                  'door-moving': doorStatus === 'moving' 
                }" @click="toggleDoor">
                  {{ getDoorStatusText }}
                </button>
              </view>
              <view class="status-item">
                <span class="item-label">自动控制：</span>
                <button class="item-value status-btn" :class="{ 'auto-active': autoControlEnabled }" @click="toggleAutoControl">
                  {{ autoControlEnabled ? '开启' : '关闭' }}
                </button>
              </view>
            </view>
            <!-- 修复了注释标签 -->
            <!-- <view class="update-time">
              最后更新：{{ lastUpdateTime }}
            </view> -->
          </view>
        </view>
      </template>
    </view>

    <!-- 底部四个小标题 -->
    <view class="footer">
      <view class="footer-row">
        <span 
          class="footer-title" 
          @click="navigateToPage('index')"
          :class="{ 'active': currentPage === 'index' }"
        >
          数据展示
        </span>
        <span 
          class="footer-title" 
          @click="navigateToPage('index001')"
          :class="{ 'active': currentPage === 'index001' }"
        >
          参数更改
        </span>
        <!-- <span 
          class="footer-title" 
          @click="navigateToPage('index002')"
          :class="{ 'active': currentPage === 'index002' }"
        >
          历史记录
        </span> -->
        <span 
          class="footer-title" 
          @click="navigateToPage('index003')"
          :class="{ 'active': currentPage === 'index003' }"
        >
          警报控制
        </span>
      </view>
    </view>

    <!-- 更改名称弹窗 -->
    <view class="name-dialog" v-if="isNameDialogOpen">
      <view class="dialog-mask" @click="closeNameDialog"></view>
      <view class="dialog-content">
        <view class="dialog-header">
          <h3 class="dialog-title">更改名称</h3>
          <button class="dialog-close" @click="closeNameDialog">×</button>
        </view>
        <view class="dialog-body">
          <input 
            type="text" 
            class="name-input" 
            v-model="newUsername" 
            placeholder="请输入新名称" 
            @keyup.enter="changeUsername"
          >
        </view>
        <view class="dialog-footer">
          <button class="dialog-btn cancel-btn" @click="closeNameDialog">取消</button>
          <button class="dialog-btn confirm-btn" @click="changeUsername">确认</button>
        </view>
      </view>
    </view>
    
    <!-- 更改密码弹窗 -->
    <view class="password-dialog" v-if="isPasswordDialogOpen">
      <view class="dialog-mask" @click="closePasswordDialog"></view>
      <view class="dialog-content">
        <view class="dialog-header">
          <h3 class="dialog-title">更改密码</h3>
          <button class="dialog-close" @click="closePasswordDialog">×</button>
        </view>
        <view class="dialog-body">
          <view class="password-input-group">
            <input 
              type="password" 
              class="password-input" 
              v-model="oldPassword" 
              placeholder="请输入当前账号" 
              @keyup.enter="changePassword"
            >
          </view>
          <view class="password-input-group">
            <input 
              type="password" 
              class="password-input" 
              v-model="newPassword" 
              placeholder="请输入新密码" 
              @keyup.enter="changePassword"
            >
          </view>
          <view class="password-input-group">
            <input 
              type="password" 
              class="password-input" 
              v-model="confirmPassword" 
              placeholder="请再次输入新密码" 
              @keyup.enter="changePassword"
            >
          </view>
        </view>
        <view class="dialog-footer">
          <button class="dialog-btn cancel-btn" @click="closePasswordDialog">取消</button>
          <button class="dialog-btn confirm-btn" @click="changePassword">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, watchEffect } from 'vue';

// 侧边栏状态
const sidebarOpen = ref(false);

// 用户名
const username = ref('罗帅');
const newUsername = ref('');
const isNameDialogOpen = ref(false);

// 密码相关
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const isPasswordDialogOpen = ref(false);

// 天气数据（使用weather1字段）
const weatherData = ref({
  city: '长沙',
  temperature: '--',
  weather1: '--', // 天气状况（如：晴、多云）
  humidity: '--',
  pressure: '--',
});

// 当前页面标识
const currentPage = ref('index');

// 温度和湿度警报状态
const isTemperatureAlert = ref(false);
const isHumidityAlert = ref(false);

// 自动控制状态
const autoControlEnabled = ref(true); // 默认开启自动控制

// index003.vue 相关数据
const buzzerAlert = ref(false);  // 蜂鸣器警报状态
const ledAlert = ref(false);     // LED灯警报状态
const alarmDuration = ref(0);    // 警报持续时间(分钟)
const doorStatus = ref('closed'); // 卷帘门状态: open, closed, moving
// const lastUpdateTime = ref('');
const toggleBuzzerAlert = () => {
  buzzerAlert.value = !buzzerAlert.value;
}
const toggleLedAlert = () => {
  ledAlert.value = !ledAlert.value;
}

// 切换自动控制状态
const toggleAutoControl = () => {
  autoControlEnabled.value = !autoControlEnabled.value;
  if (autoControlEnabled.value) {
    // 如果开启自动控制，检查当前是否需要打开门
    checkThresholdAlerts();
  }
}

// 切换门状态（手动控制）
const toggleDoor = () => {
  if (doorStatus.value === 'closed') {
    openDoor();
  } else if (doorStatus.value === 'open') {
    closeDoor();
  }
}

// 打开门
const openDoor = () => {
  if (doorStatus.value !== 'open') {
    doorStatus.value = 'moving';
    // 模拟开门过程
    setTimeout(() => {
      doorStatus.value = 'open';
    }, 2000); // 2秒后门完全打开
  }
}

// 关闭门
const closeDoor = () => {
  if (doorStatus.value !== 'closed') {
    doorStatus.value = 'moving';
    // 模拟关门过程
    setTimeout(() => {
      doorStatus.value = 'closed';
    }, 2000); // 2秒后门完全关闭
  }
}

const getDoorStatusText = computed(() => {
  if (doorStatus.value === 'open') {
    return '开启状态';
  } else if (doorStatus.value === 'closed') {
    return '关闭状态';
  }
  return '移动中';
});

// index001.vue 相关数据
const tempThreshold = ref(25);
const humidityThreshold = ref(60);
const decreaseTempThreshold = () => {
  if (tempThreshold.value > 0) {
    tempThreshold.value--;
  }
}
const increaseTempThreshold = () => {
  if (tempThreshold.value < 100) {
    tempThreshold.value++;
  }
}
const decreaseHumidityThreshold = () => {
  if (humidityThreshold.value > 0) {
    humidityThreshold.value--;
  }
}
const increaseHumidityThreshold = () => {
  if (humidityThreshold.value < 100) {
    humidityThreshold.value++;
  }
}

// 显示更改名称弹窗
const showNameChangeDialog = () => {
  newUsername.value = username.value; // 初始值设为当前用户名
  isNameDialogOpen.value = true;
}

// 关闭更改名称弹窗
const closeNameDialog = () => {
  isNameDialogOpen.value = false;
}

// 更改用户名
const changeUsername = () => {
  const name = newUsername.value.trim();
  if (!name) {
    uni.showToast({ title: '用户名不能为空', icon: 'none' });
    return;
  }
  
  // 保存用户名（实际应用中可能需要发送到服务器）
  username.value = name;
  
  // 关闭弹窗
  closeNameDialog();
  
  // 显示成功提示
  uni.showToast({ title: '用户名修改成功', icon: 'success' });
}

// 显示更改密码弹窗
const showPasswordChangeDialog = () => {
  // 清空输入框
  oldPassword.value = '';
  newPassword.value = '';
  confirmPassword.value = '';
  isPasswordDialogOpen.value = true;
}

// 关闭更改密码弹窗
const closePasswordDialog = () => {
  isPasswordDialogOpen.value = false;
}

// 更改密码
const changePassword = () => {
  // 简单验证
  if (!oldPassword.value) {
    uni.showToast({ title: '请输入当前账号', icon: 'none' });
    return;
  }
  
  if (!newPassword.value) {
    uni.showToast({ title: '请输入新密码', icon: 'none' });
    return;
  }
  
  if (newPassword.value.length < 6) {
    uni.showToast({ title: '新密码长度不能少于6位', icon: 'none' });
    return;
  }
  
  if (newPassword.value !== confirmPassword.value) {
    uni.showToast({ title: '两次输入的新密码不一致', icon: 'none' });
    return;
  }
  
  // 这里应该添加密码验证逻辑，例如检查当前密码是否正确
  // 由于没有后端验证，这里简单模拟成功
  uni.showToast({ title: '密码修改成功', icon: 'success' });
  
  // 关闭弹窗
  closePasswordDialog();
}

// 检查是否超过阈值并触发警报
const checkThresholdAlerts = () => {
  // 检查温度是否超过阈值
  if (weatherData.value.temperature !== '--' && tempThreshold.value !== '--') {
    const tempValue = parseFloat(weatherData.value.temperature);
    const tempThresholdValue = parseFloat(tempThreshold.value);
    isTemperatureAlert.value = tempValue > tempThresholdValue;
  } else {
    isTemperatureAlert.value = false;
  }
  
  // 检查湿度是否超过阈值
  if (weatherData.value.humidity !== '--' && humidityThreshold.value !== '--') {
    const humidityValue = parseFloat(weatherData.value.humidity);
    const humidityThresholdValue = parseFloat(humidityThreshold.value);
    isHumidityAlert.value = humidityValue > humidityThresholdValue;
  } else {
    isHumidityAlert.value = false;
  }
  
  // 根据警报状态自动控制蜂鸣器和LED灯
  if (isTemperatureAlert.value || isHumidityAlert.value) {
    // 如果有任何警报触发，打开蜂鸣器和LED灯
    buzzerAlert.value = true;
    ledAlert.value = true;
    
    // 如果自动控制开启，且门当前关闭，则打开门
    if (autoControlEnabled.value && doorStatus.value === 'closed') {
      openDoor();
    }
    
    // 设置警报持续时间
    if (alarmDuration.value > 0) {
      setTimeout(() => {
        // 仅当阈值恢复正常时才关闭警报
        if (!isTemperatureAlert.value && !isHumidityAlert.value) {
          buzzerAlert.value = false;
          ledAlert.value = false;
        }
      }, alarmDuration.value * 60 * 1000);
    }
  } else {
    // 如果没有警报，检查是否需要关闭门
    if (autoControlEnabled.value && doorStatus.value === 'open') {
      // 延迟一段时间后关闭门，给环境一些时间恢复
      setTimeout(() => {
        if (!isTemperatureAlert.value && !isHumidityAlert.value) {
          closeDoor();
        }
      }, 5 * 60 * 1000); // 5分钟后检查是否可以关门
    }
    
    // 如果没有警报且没有设置持续时间，关闭蜂鸣器和LED灯
    if (alarmDuration.value <= 0) {
      buzzerAlert.value = false;
      ledAlert.value = false;
    }
  }
}

// 页面挂载时初始化
onMounted(() => {
  const pages = getCurrentPages();
  if (pages.length > 0) {
    currentPage.value = pages[pages.length - 1].route.split('/').pop();
  }
  fetchWeather();
  setInterval(fetchWeather, 30 * 60 * 1000); // 每30分钟更新
  
  // 页面加载时检查一次阈值
  checkThresholdAlerts();
});

// 监听天气数据和阈值变化
watchEffect(() => {
  checkThresholdAlerts();
});

// 切换侧边栏显示/隐藏
const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value;
}

// 处理侧边栏菜单项点击
const handleMenuItemClick = (item) => {
  console.log(`点击了侧边栏菜单: ${item}`);
  toggleSidebar();
  if (item === 'logout') {
    uni.reLaunch({ url: '/pages/login/login' });
  } else if (item === 'profile') {
    // 显示更改名称弹窗
    showNameChangeDialog();
  } else if (item === 'password') {
    // 显示更改密码弹窗
    showPasswordChangeDialog();
  }
}

// 卡片点击事件处理
const handleCardClick = (index) => {
  console.log(`点击卡片 ${index}`);
}

// 导航到对应页面
const navigateToPage = (pageName) => {
  if (currentPage.value === pageName) return; 
  currentPage.value = pageName;
}

// 获取天气数据（从API获取weather1字段）
const fetchWeather = () => {
  const apiUrl = `https://cn.apihz.cn/api/tianqi/tqyb.php?id=10004952&key=ea67074344e4a43313a2627de4e4c790&sheng=湖南&place=长沙`;

  uni.request({
    url: apiUrl,
    method: 'GET',
    success: (res) => {
      console.log('天气API返回数据:', res.data);
      try {
        if (res.statusCode === 200) {
          weatherData.value = {
            city: '长沙',
            temperature: res.data.temperature || '--',
            weather1: res.data.weather1 || res.data.weather || '未知', // 优先使用weather1字段
            humidity: res.data.humidity || '--',
            pressure: res.data.pressure || '--',
          };
        } else {
          uni.showToast({ title: '获取天气数据失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '解析数据失败', icon: 'none' });
      }
    },
    fail: (err) => {
      uni.showToast({ title: '网络请求失败', icon: 'none' });
    }
  });
}

// 根据天气状况获取图标
const getWeatherIcon = (weather) => {
  if (!weather) return '❓';
  
  if (weather.includes('晴')) return '☀️';
  if (weather.includes('云') || weather.includes('阴')) return '☁️';
  if (weather.includes('雨')) return '🌧️';
  if (weather.includes('雪')) return '❄️';
  if (weather.includes('雷')) return '⚡';
  if (weather.includes('雾') || weather.includes('霾')) return '🌫️';
  
  return '❓';
}
</script>

<style scoped>
/* 全局样式 */
.index-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  font-family: 'Segoe UI', sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* 侧边栏样式 */
.sidebar {
  position: fixed;
  top: 0;
  left: -280px;/*359.5*/
  width: 280px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
}

.sidebar-active {
  left: 0;
}

.sidebar-header {
  padding: 16px;
  background-color: #1a73e8;
  color: white;
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  background-color: #fff;
}

.avatar img {
  width: 100%;
  height: 100%;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 1px;
}

.user-role {
  font-size: 11px;
  opacity: 0.8;
}

.sidebar-content {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #f0f0f0;
}

.menu-icon {
  font-size: 16px;
  width: 25px;
  text-align: center;
  margin-right: 12px;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  text-align: center;
  font-size: 10px;
  color: #666;
}

/* 遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay-active {
  opacity: 1;
  visibility: visible;
}

/* 头部样式 */
.header {
  text-align: center;
  padding: 20px 16px;
  height: 125px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 100;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-toggle {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-toggle:hover {
  background-color: #f0f0f0;
}

.menu-icon {
  font-size: 18px;
  color: #1a73e8;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a73e8;
  margin-bottom: 6px;
}

.header-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto;
}

/* 中间卡片网格 - 移动端优化 */
.grid-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  background-color: #f5f5f5;
}

/* 天气卡片网格 - 固定为2x2田字格布局 */
.weather-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 固定为两列 */
  grid-template-rows: 1fr 1fr;    /* 固定为两行 */
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
}

.grid-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100px; /* 确保卡片高度一致 */
}

.grid-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
}

/* 警报触发状态 */
.alert-triggered {
  border: 2px solid #ff4d4f;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
  }
}

.alert-badge {
  background-color: #ff4d4f;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
}

.card-icon {
  font-size: 28px;
  color: #1a73e8;
  margin-bottom: 8px;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.card-desc {
  font-size: 12px;
  color: #666;
  min-height: 32px; /* 确保加载状态高度一致 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-note {
  text-align: right;
  font-size: 10px;
  color: #666;
  width: 100%;
  padding: 6px 0;
}

/* 底部信息栏 */
.footer {
  background-color: #ffffff;
  font-size: 15px;
  /* height:300px; */
  padding: 8px 12px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.03);
}

.footer-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.footer-row::-webkit-scrollbar {
  display: none;
}

.footer-title {
  font-size: 15px;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  padding: 6px 8px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.footer-title:hover {
  color: #1a73e8;
}

/* 激活状态样式 */
.footer-title.active {
  color: #1a73e8;
  border-bottom: 2px solid #1a73e8;
  padding-bottom: 4px;
}

/* 内容区域样式 - 居中布局 */
.content-area {
  flex: 1;
  display: flex;
  padding: 16px 12px;
  background-color: #f5f5f5;
}

.centered-content {
  justify-content: center;
  align-items: center;
}

.centered-card {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/* 阈值方格样式 - 增加高度和优化布局 */
.threshold-box {
  background-color: #ffffff;
  padding: 24px; /* 增加内边距 */
  border-radius: 12px; /* 增加圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); /* 增强阴影 */
  min-height: 220px; /* 增加最小高度 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.threshold-box:hover {
  transform: translateY(-3px); /* 悬停时轻微上浮 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.09); /* 增强悬停时的阴影 */
}

.threshold-title {
  font-size: 18px; /* 增大标题字体 */
  font-weight: 600;
  color: #1a73e8;
  margin-bottom: 16px; /* 增加底部间距 */
  border-bottom: 1px solid #eee;
  padding-bottom: 8px; /* 增加底部内边距 */
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0; /* 增加上下内边距 */
  border-bottom: 1px dashed #eee;
}

.status-item:last-child {
  border-bottom: none;
}

.item-label {
  font-size: 15px; /* 增大标签字体 */
  color: #555; /* 加深文本颜色 */
  font-weight: 500; /* 增加字体粗细 */
}

.item-value {
  font-size: 17px; /* 增大数值字体 */
  font-weight: 600; /* 增加字体粗细 */
  color: #333;
  margin: 0 12px; /* 增加左右间距 */
}

.value-controls {
  display: flex;
  align-items: center;
}

.control-btn {
  width: 32px; /* 增大按钮尺寸 */
  height: 32px;
  border-radius: 50%;
  background-color: #f0f0f0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.control-btn:hover {
  background-color: #e0e0e0;
}

.control-btn span {
  font-size: 16px; /* 增大按钮图标 */
  color: #1a73e8;
  font-weight: bold;
}

.threshold-note {
  font-size: 12px;
  color: #666;
  margin-top: 16px; /* 增加顶部间距 */
  text-align: right;
}

/* 状态卡片样式 */
.status-card {
  background-color: #ffffff;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1a73e8;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
}

/* 警报状态组 */
.status-group {
  margin-bottom: 12px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
}

.status-item:last-child {
  border-bottom: none;
}

.item-label {
  font-size: 13px;
  color: #666;
  min-width: 80px; /* 减少标签宽度，节省空间 */
}

.item-value {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* 警报激活状态 */
.alert-active {
  color: #ff4d4f;
  background-color: #fff7f8;
  border: 1px solid #ffd7d9;
}

/* 按钮样式 */
.status-btn {
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  font-size: 13px; /* 减小按钮文字大小 */
}

.door-open {
  color: #52c41a;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
}

.door-closed {
  color: #1890ff;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

.door-moving {
  color: #faad14;
  background-color: #fff7e6;
  border: 1px solid #ffe7ba;
  animation: pulse 1.5s infinite;
}

/* 持续时间输入框 */
.duration-container {
  display: flex;
  align-items: center;
  gap: 3px;
}

.duration-input {
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  width: 50px;
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.unit {
  font-size: 14px;
  color: #666;
}

/* 更新时间 */
.update-time {
  font-size: 11px;
  color: #888;
  text-align: right;
  margin-top: 12px;
}

/* 自动控制按钮样式 */
.auto-active {
  color: #1a73e8;
  background-color: #e8f0fe;
  border: 1px solid #d2e3fc;
}

/* 更改名称弹窗样式 */
.name-dialog, .password-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  position: relative;
  width: 85%;
  max-width: 320px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.dialog-header {
  padding: 12px 16px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex: 1;
  text-align: left;
}

.dialog-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #f0f0f0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: 10px;
}

.dialog-close:hover {
  background-color: #e0e0e0;
}

.dialog-body {
  padding: 24px 16px;
}

.name-input, .password-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 16px;
  color: #333;
  box-sizing: border-box;
  height: 50px;
}

.name-input:focus, .password-input:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.password-input-group {
  margin-bottom: 12px;
}

.dialog-footer {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-btn {
  padding: 4px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 14px;
  font-weight: 500;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #333;
  border: none;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.confirm-btn {
  background-color: #1a73e8;
  color: white;
  border: none;
}

.confirm-btn:hover {
  background-color: #0d47a1;
}

/* 占位文本样式 */
.placeholder-text {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.placeholder-text p {
  margin: 8px 0;
  color: #666;
}
</style>
